<template>
    <div id="app">
        <el-container style="background: url(http://rww08uahf.hn-bkt.clouddn.com/0dd8ed5b730c4df7babec5898c4b641c.png);">
            <!--抬头开始-->
            <el-header>
                <Top />
            </el-header>
            <!--抬头结束-->
            <!--内容开始-->
            <el-main>
                <div style="height: 100vh;">
                    <!-- banner -->
                    <div class="message-banner">
                        <!-- 弹幕输入框 -->
                        <div class="message-container">
                            <div class="animated fadeInUp message-input-wrapper">
                                <input v-model="messageContent" @click="show = true" placeholder="说点什么吧"
                                    style="background: transparent;" />
                                <button class="ml-3 animated bounceInLeft" @click="addToList" v-show="show" style="width: 70px">
                                    发送
                                </button>
                            </div>
                        </div>
                        <!-- 弹幕列表 -->
                        <div class="barrage-container">
                            <vue-baberrage :barrageList="barrageList" :boxHeight="boxHeight"
                                           :isShow="barrageIsShow"
                                           :lanesCount="lanesCount"
                                           :loop="barrageLoop"
                                           :messageHeight="messageHeight"
                                           :throttleGap="throttleGap">
                                <template v-slot:default="slotProps">
                                    <span class="barrage-items">
                                        <img :src="slotProps.item.avatar" width="30" height="30"
                                            style="border-radius:50%" />
                                        <span class="ml-2">{{ slotProps.item.nickname }} :</span>
                                        <span class="ml-2">{{ slotProps.item.messageContent }}</span>
                                    </span>
                                </template>
                            </vue-baberrage>
                        </div>
                    </div>
                </div>
            </el-main>
            <!--内容结束-->
            <!--底部开始-->
            <Bottom />
            <!--底部结束-->
        </el-container>
    </div>
</template>

<script>
import Top from '@/components/Top.vue'
import Bottom from "@/components/Bottom.vue";
export default {
    components: {
        Top,
        Bottom
    },
    created() {
        this.user= localStorage.user ? JSON.parse(localStorage.user) : null,
        this.userId = this.user.id
        this.avatar = this.user.avatar
        this.nickname = this.user.nickname
    },
    mounted() {
        this.listMessage()
    },
    data() {
        return {
            user:'',
            userId: '',
            avatar: '',
            nickname: '',
            show: false,
            messageContent: '',
            barrageList: [],
            barrageIsShow: true,    	//是否展示弹幕
            barrageLoop: true,     	//是否循环播放
            boxHeight: 170,         	//高度
            messageHeight: 25,		//消息高度
            lanesCount: 5,			//泳道数量
            throttleGap: 5000,		//消息间隔
        }
    },
    methods: {
        async addToList() {
            if (this.messageContent.trim() === '') {
                this.$message.info('留言不能为空')
                return false
            }
            const userID = this.userId
                ? this.userId
                : 0
            const userAvatar = this.avatar
                ? this.avatar
                : 'http://rww08uahf.hn-bkt.clouddn.com/964a0f20e41b4303959890fe8c2231be.png'
            const userNickname = this.nickname
                ? this.nickname
                : '游客'
            const message = {
                userId: userID,
                avatar: userAvatar,
                nickname: userNickname,
                messageContent: this.messageContent,
                time: Math.floor(Math.random() * 10 + 6)
            }
            this.barrageList.push(message)
            this.messageContent = ''
            this.axios.post('http://localhost:8088/message/addMessage', message).then((res) => {
                // const { data: res } = await this.$http.post('/extension/message/add', message)
                if (res.data.code == 1) {
                    // 弹出提示信息
                    this.$message.success('新增留言成功')
                } else { // 执行失败
                    this.$message.error('留言失败')
                }
            });
        },
        async listMessage() {
            this.axios.get('http://localhost:8088/message/getMessage').then((res) => {
                // const { data: res } = await this.$http.get('/extension/message/getMessageList')
                if (res.data.code == 1) {
                    // this.$message.success(res.message)
                    this.barrageList = res.data.data;
                } else {
                    this.$message.error(res.data.msg)
                }
            });
        }
    }
}
</script>

<style>
body {
    margin: 0;

}
::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: #1d2d44;
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
}
::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
}

.el-message {
    top: 100px !important;
}
/*弹幕区域高度*/
/deep/ .baberrage-stage {
    height: 170px;
}

/*弹幕消息框*/
/deep/ .baberrage-item .normal {
    padding: 5px 10px;
}

/*头像*/
/deep/ .baberrage-item .normal .baberrage-avatar {
    width: 25px;
    height: 25px;
    background-color: black;
}

/*文字*/
/deep/ .baberrage-item .normal .baberrage-msg {
    font-size: 14px;
    line-height: 25px;
}

.message-banner {
    position: absolute;
    /*top: -58px;*/
    left: 0;
    right: 0;
    height: 100vh;

    animation: header-effect 1s;
}

.message-title {
    color: #007aff;
    animation: title-scale 1s;
}

.message-container {
    position: absolute;
    width: 360px;
    top: 35%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 5;
    margin: 0 auto;
    color: #007aff;
}

.message-input-wrapper {
    display: flex;
    justify-content: center;
    height: 2.5rem;
    margin-top: 2rem;
}

.message-input-wrapper input {
    outline: none;
    width: 70%;
    border-radius: 20px;
    height: 100%;
    padding: 0 1.25rem;
    color: white;
    border: white 1px solid;
}

.message-input-wrapper input::-webkit-input-placeholder {
    color: gold;
}

.message-input-wrapper button {
    outline: none;
    border-radius: 20px;
    height: 100%;
    padding: 0 1.25rem;
    border: #283c63 1px solid;
}

.barrage-container {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100% - 50px);
    width: 100%;
}

.barrage-items {
    background: rgb(0, 0, 0, 0.7);
    border-radius: 100px;
    color: #fff;
    padding: 5px 10px 5px 5px;
    align-items: center;
    display: flex;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.title_p {
    font-size: 24px;
    font-weight: 500;
    color: #222226;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-height: 25px;
    margin-bottom: 4px;
}

.title_span {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei, Verdana, Roboto, Noto, Helvetica Neue, sans-serif;
}

.right-card .el-card__body {
    /**/
    padding: 0;
    /*去掉card自带内边距*/
}

.image {
    width: 30px;
    height: 30px;

}

.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    padding: 0;
    float: contour;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>
